<template>
  <div class="app-container customer-div">
    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="客户名称：">
          <el-autocomplete
            clearable
            class="inline-input"
            value-key="customerName"
            :fetch-suggestions="querySearch"
            v-model="customerName"
            placeholder="请输入内容"
            @select="handleSelectCustomerName"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="订单号：">
          <el-input v-model="listQuery.orderSn" clearable></el-input>
        </el-form-item>
        <el-form-item label="业务员：">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
      <!--数据列表-->
      <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
            align="center"
            label="客户名称"
            min-width="200"
            prop="customerName">
          </el-table-column>
          <el-table-column  label="合同编号" min-width="200" align="center" prop="orderSn">
          </el-table-column>
          <el-table-column
            prop="orderAmount"
            align="center"
            label="订单金额"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="breakAmount"
            align="center"
            min-width="150"
            label="违约金额">
          </el-table-column>
          <el-table-column
            prop="outDateNum"
            label="违约天数"
            min-width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="orderRemark"
            label="支付摘要"
            min-width="180"
            align="center">
          </el-table-column>
          <el-table-column
            prop="orderShipDate"
            label="发货日期"
            min-width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="业务员"
            min-width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="lastPayDate"
            label="合同最晚付款日期"
            min-width="100"
            align="center">
          </el-table-column>
        </el-table>
      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getCustomerOption,
  getOrderUsersList,
} from '@/api/partner';
import {
  payBreakListAPI
} from '@/api/accounting';
import store from '@/store';
import { mapGetters } from 'vuex';
const defaultListQuery = {
  customerId: "",
  userId: '',
  orderSn:'',
  pageNum: 1,
  pageSize: 10,
};
export default {
  name: "defaultCountList",
  data() {
    return {
      customerName: '',
      userOptionList:[],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      roles: store.getters.roles ? store.getters.roles : [],
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getList();
    this.getUserOptionList();
  },
  filters: {
  },
  methods: {
    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },
    //客户名称输入匹配
    querySearch(queryString, cb) {
      getCustomerOption({ keywords: queryString }).then((res) => {
        cb(res);
      })
    },

    //选择客户名称
    handleSelectCustomerName(item) {
      this.listQuery.customerId = item.customerId;
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      if (this.customerName == '') {
        this.listQuery.customerId = '';
      }
      payBreakListAPI(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },

  },
};
</script>

<style lang="scss">

</style>
